<template>
    <div>

        <el-card shadow="never" class="aui-card--fill">
            <div class="mod-demo__cars}">
                <el-table v-loading="cardataListLoading" :data="cardataList" border
                    @selection-change="cardataListSelectionChangeHandle" style="width: 100%;">
                    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                    <el-table-column prop="id" label="车辆ID" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="useCost" label="固定成本" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="costPerKilometer" label="单位成本" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="speed" label="行驶速度" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="carryingCapacity" label="载重量" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="createDate" label="创建时间" header-align="center" align="center">
                    </el-table-column>
                </el-table>
                <el-pagination :current-page="carpage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="carlimit"
                    :total="cartotal" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="carpageSizeChangeHandle" @current-change="carpageCurrentChangeHandle">
                </el-pagination>
            </div>
        </el-card>


        <el-card shadow="never" class="aui-card--fill">
            <div class="mod-demo__warehouse}">

                <el-table v-loading="warehousedataListLoading" :data="warehousedataList" border
                    @selection-change="warehousedataListSelectionChangeHandle" style="width: 100%;">
                    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                    <el-table-column prop="id" label="仓库ID" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="demand" label="物资量" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="locationX" label="x坐标" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="locationY" label="y坐标" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="createDate" label="创建时间" header-align="center" align="center">
                    </el-table-column>
                </el-table>
                <el-pagination :current-page="warehousepage" :page-sizes="[5, 10, 20, 50, 100]"
                    :page-size="warehouselimit" :total="warehousetotal" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="warehousepageSizeChangeHandle" @current-change="warehousepageCurrentChangeHandle">
                </el-pagination>
            </div>
        </el-card>

        <!-- 仓库或车辆为空的弹出框 -->
        <el-dialog title="错误" :visible.sync="dialogVisible" width="30%">
            <span>仓库或车辆为空</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 获取车辆仓库信息 -->
        <!-- <el-button class="car-button" @click="carquery">carquery</el-button> -->
        <div class="box">
            <el-button class="clear-button" @click="clear">清除</el-button>
            <el-button class="algo-button" @click="algo">调度</el-button>
        </div>
        <!-- <el-button @click="getScatter">测试散点图</el-button> -->

        <div class="scatter-div" id="scatter" style="width: 100%;height:700px;"></div>


    </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import cloneDeep from 'lodash/cloneDeep'
import * as echarts from 'echarts';
// import qs from 'qs'
// import { config } from 'vue/types/umd'
// import AddOrUpdate from './cars-add-or-update'

export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                createdIsNeed: false,       // 此页面是否在创建时，调用查询数据列表接口？
                activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
                getDataListURL: '',       // 数据列表接口，API地址
                getDataListIsPage: false, // 数据列表接口，是否需要分页？
                deleteURL: '',            // 删除接口，API地址
                deleteIsBatch: false,     // 删除接口，是否需要批量？
                deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
                exportURL: ''             // 导出接口，API地址
            },
            // 设置属性
            carmixinViewModuleOptions: {
                createdIsNeed: true,       // 此页面是否在创建时，调用查询数据列表接口？
                activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
                getDataListURL: '',       // 数据列表接口，API地址
                getDataListIsPage: false, // 数据列表接口，是否需要分页？
                deleteURL: '',            // 删除接口，API地址
                deleteIsBatch: false,     // 删除接口，是否需要批量？
                deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
                exportURL: ''             // 导出接口，API地址
            },
            // 设置属性
            warehousemixinViewModuleOptions: {
                createdIsNeed: true,       // 此页面是否在创建时，调用查询数据列表接口？
                activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
                getDataListURL: '',       // 数据列表接口，API地址
                getDataListIsPage: false, // 数据列表接口，是否需要分页？
                deleteURL: '',            // 删除接口，API地址
                deleteIsBatch: false,     // 删除接口，是否需要批量？
                deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
                exportURL: ''             // 导出接口，API地址
            },
            cardataForm: {},               // 查询条件
            cardataList: [],               // 数据列表
            carorder: '',                  // 排序，asc／desc
            carorderField: '',             // 排序，字段
            carpage: 1,                    // 当前页码
            carlimit: 5,                  // 每页数
            cartotal: 0,                   // 总条数
            cardataListLoading: false,     // 数据列表，loading状态
            cardataListSelections: [],     // 数据列表，多选项
            caraddOrUpdateVisible: false,   // 新增／更新，弹窗visible状态

            warehousedataForm: {},               // 查询条件
            warehousedataList: [],               // 数据列表
            warehouseorder: '',                  // 排序，asc／desc
            warehouseorderField: '',             // 排序，字段
            warehousepage: 1,                    // 当前页码
            warehouselimit: 5,                  // 每页数
            warehousetotal: 0,                   // 总条数
            warehousedataListLoading: false,     // 数据列表，loading状态
            warehousedataListSelections: [],     // 数据列表，多选项
            warehouseaddOrUpdateVisible: false,   // 新增／更新，弹窗visible状态

            dialogVisible: false
        }
    },
    methods: {
        // 生成随机请求体
        getRandomRequestBody() {
            let cars = [], warehouses = []
            let carNums = 25, warehouseNums = 50
            for (let i = 0; i < carNums; i++) {
                cars.push({
                    useCost: Math.trunc(Math.random() * 100 + 200),
                    costPerKilometer: Math.trunc(Math.random() * 3 + 2),
                    speed: Math.trunc(Math.random() * 50 + 30),
                    carryingCapacity: Math.trunc(Math.random() * 10 + 20)
                })
            }

            for (let i = 0; i < warehouseNums; i++) {
                warehouses.push({
                    demand: Math.trunc(Math.random() * 5 + 5),
                    locationX: Math.trunc(Math.random() * 100 - 50),
                    locationY: Math.trunc(Math.random() * 100 - 50)
                })
            }

            return { cars, warehouses }
        },
        getScatter(res) {
            // res = '120 113 36 10 72 40 46 36 10 44 175 77 0 16 183 88 15 14 97 38 10 79 36 7 159 87 45 48 5 36 26 44 48 20 165 22 17 -31 109 21 -32 112 -5 -23 9 -7 -16 141 92 30 -10 171 76 46 25 73 44 28 86 44 -25 118 -41 -38 164 103 16 4 25 18 -21 2 -20 -43 185 11 -10 0 132 96 -22 9 99 -33 26 84 -39 12 158 67 15 43 43 14 23 151 56 33 7 59 40 36 58 33 37 196 107 -42 -28 81 -45 -2 52 -41 -13 140 115 22 10 108 -46 0 68 -25 46 80 -13 45 214 100 -7 -20 116 -20 -36 82 -14 -19 194 18 -34 47 32 -47 19 27 -42 0 149 74 26 30 46 6 -45 63 8 -40 169 31 -41 15 39 -30 32 65 -28 26 48 -29 17 146 55 -12 30 21 -18 31 47 -22 24 136 29 -25 20 42 -21 -6 1 -19 40 211 75 39 -25 41 46 -21 110 -15 -42 125 3 33 -34 30 10 -44 93 10 -45 13 39 14 182 53 -19 -24 102 -40 -28 10 -37 17 121 33 22 43 34 29 47 20 -19 45 6 -13 17 148 91 1 29 50 11 23 40 7 20 181 111 35 -3 64 41 2 61 45 -35 38 24 -34 150 95 -42 11 89 -27 -47 106 -17 -38 19 -4 -19 134 101 3 -9 105 -8 -14 37 17 -19 204 28 -7 19 26 -33 -15 14 -22 -14 156 8 -44 -10 16 -39 -15 49 1 35 184 69 -18 -46 83 -36 -47 70 -41 8 187 120 49 -11 114 31 1 24 39 -21 119 43 -37 166 51 -6 42 4 -9 31 7 -49 20 60 -6 11 168 85 2 -2 98 7 -2 45 33 -20 54 31 -29 202 23 4 8 104 6 49 57 22 18 208 117 -16 -23 90 -34 -34 78 -31 -29 62 -24 -19 177 66 -20 48 94 -49 24 71 -38 40 213 12 -6 21 17 -31 -15 15 -35 -22 35 0 -18 155 144 189 170 207 135 145 130 210 162 205 137 216 163 198 200 122 131 152 154 215 191 174 127 218 188 217 179 124 126 128 160 153 172 201 138 147 197 199 190 186 139 157 180 176 212 143 133 195 123 192 219 203 167 193 129 161 206 220 173 209 178 142'
            let arr = res.split(' ')
            console.log(arr);
            for (let i = 0; i < arr.length; i++) {
                arr[i] = Number(arr[i])
            }
            console.log(arr);

            var myChart = echarts.init(document.getElementById('scatter'));
            let x = [], y = [], z = []
            let warehousenum = 0
            for (let i = 1; i < arr.length; i++) {
                if (arr[i] <= arr[0]) {
                    x.push(arr[++i])
                    y.push(arr[++i])
                    warehousenum++
                } else if (!z || z.slice(-1) !== warehousenum) {
                    z.push(warehousenum)
                }
            }
            // 散点数据
            let data = []
            for (let i = 0; i < x.length; i++) {
                data.push([x[i], y[i]])
            }

            // 连线数据
            let markLineData = []
            for (let i = 0; i < z.length; i++) {
                let X = [], Y = []
                if (i === 0) {
                    X = x.slice(0, z[i])
                    Y = y.slice(0, z[i])
                } else {
                    X = x.slice(z[i - 1], z[i])
                    Y = y.slice(z[i - 1], z[i])
                }
                let lineStyle = {
                    width: 1,
                    type: 'solid',
                    color: '#e43961',
                }
                let dataArr = []
                for (let j = 0; j < X.length; j++) {
                    dataArr = []
                    let lineObj1 = {}, lineObj2 = {}
                    if (j === 0) {
                        lineObj1 = {
                            coord: [0, 0],
                        }
                        lineObj2 = {
                            coord: [X[j], Y[j]],
                        }
                    } else {
                        lineObj1 = {
                            coord: [X[j - 1], Y[j - 1]]
                        }
                        lineObj2 = {
                            coord: [X[j], Y[j]],
                        }
                    }
                    dataArr.push(
                        { ...lineObj1, ...{ lineStyle: lineStyle } },
                        { ...lineObj2, ...{ lineStyle: lineStyle } }
                    )
                    markLineData.push(dataArr)
                }
                dataArr = []
                dataArr.push(
                    {
                        coord: [X[X.length - 1], Y[Y.length - 1]],
                        lineStyle: lineStyle
                    },
                    {
                        coord: [0, 0],
                        lineStyle: lineStyle
                    }

                )
                console.log('dataArr', dataArr);
                markLineData.push(dataArr)
            }
            console.log('markLineData', markLineData);
            let option = {
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        type: 'scatter',
                        data: data,

                        markLine:
                        {
                            silent: false,
                            // symbol: 'none',//设置为none可以去掉连线的箭头
                            //data中接收一个数组, 数组中每个元素为一个“线段”数组
                            //每个“线段”数组包括两个对象，分别代表线段的两个端点
                            //若要连接多条线段，则在data中添加多个“线段”数组即可
                            data: markLineData
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },

        // 调度算法
        algo() {
            // if (this.cardataListSelections.length <= 0 || this.warehousedataListSelections.length <= 0) {
            //     this.dialogVisible = true
            //     return null
            // }
            // 正常请求体
            let requestbody = {
                cars: this.cardataListSelections,
                warehouses: this.warehousedataListSelections
            }
            // 随机请求体
            // let requestbody = this.getRandomRequestBody()

            this.$http.post(
                '/algo',
                requestbody
            ).then(({ data: res }) => {
                console.log('res', String(res))
                this.getScatter(String(res))
            }).catch(() => {
                console.log('res', res);
            })
            // this.cardataListSelections = this.warehousedataListSelections = []
        },

        // 清除所选择元素
        clear() {
            this.$router.go(0)
        },

        // 车辆方法
        // 获取数据列表
        carquery() {
            this.carmixinViewModuleOptions = {
                getDataListURL: '/demo/cars/page',
                getDataListIsPage: true,
                exportURL: '/demo/cars/export',
                deleteURL: '/demo/cars',
                deleteIsBatch: true
            }

            this.cardataListLoading = true
            this.$http.get(
                this.carmixinViewModuleOptions.getDataListURL,
                {
                    params: {
                        order: this.carorder,
                        orderField: this.carorderField,
                        page: this.carmixinViewModuleOptions.getDataListIsPage ? this.carpage : null,
                        limit: this.carmixinViewModuleOptions.getDataListIsPage ? this.carlimit : null,
                        ...this.cardataForm
                    }
                }
            ).then(({ data: res }) => {
                this.cardataListLoading = false
                if (res.code !== 0) {
                    this.cardataList = []
                    this.cartotal = 0
                    return this.car$message.error(res.msg)
                }
                this.cardataList = this.carmixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
                this.cartotal = this.carmixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
            }).catch(() => {
                this.cardataListLoading = false
            })
        },
        // 多选
        cardataListSelectionChangeHandle(val) {
            this.cardataListSelections = []
            this.cardataListSelections = val
            console.log("cardataListSelections", val)
        },
        // 排序
        cardataListSortChangeHandle(data) {
            if (!data.order || !data.prop) {
                this.carorder = ''
                this.carorderField = ''
                return false
            }
            this.carorder = data.order.replace(/ending$/, '')
            this.carorderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
            this.carquery()
        },
        // 分页, 每页条数
        carpageSizeChangeHandle(val) {
            this.carpage = 1
            this.carlimit = val
            this.carquery()
        },
        // 分页, 当前页
        carpageCurrentChangeHandle(val) {
            this.carpage = val
            this.carquery()
        },
        cargetDataList: function () {
            this.carpage = 1
            this.carquery()
        },

        // 仓库方法    
        // 获取数据列表
        warehousequery() {
            this.warehousemixinViewModuleOptions = {
                getDataListURL: '/demo/warehouse/page',
                getDataListIsPage: true,
                exportURL: '/demo/warehouse/export',
                deleteURL: '/demo/warehouse',
                deleteIsBatch: true
            }

            this.warehousedataListLoading = true
            this.$http.get(
                this.warehousemixinViewModuleOptions.getDataListURL,
                {
                    params: {
                        order: this.warehouseorder,
                        orderField: this.warehouseorderField,
                        page: this.warehousemixinViewModuleOptions.getDataListIsPage ? this.warehousepage : null,
                        limit: this.warehousemixinViewModuleOptions.getDataListIsPage ? this.warehouselimit : null,
                        ...this.warehousedataForm
                    }
                }
            ).then(({ data: res }) => {
                this.warehousedataListLoading = false
                if (res.code !== 0) {
                    this.warehousedataList = []
                    this.warehousetotal = 0
                    return this.warehouse$message.error(res.msg)
                }
                this.warehousedataList = this.warehousemixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
                this.warehousetotal = this.warehousemixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
            }).catch(() => {
                this.warehousedataListLoading = false
            })
        },
        // 多选
        warehousedataListSelectionChangeHandle(val) {
            this.warehousedataListSelections = []
            this.warehousedataListSelections = val
            console.log("warehousedataListSelections", val)
        },
        // 排序
        warehousedataListSortChangeHandle(data) {
            if (!data.order || !data.prop) {
                this.warehouseorder = ''
                this.warehouseorderField = ''
                return false
            }
            this.warehouseorder = data.order.replace(/ending$/, '')
            this.warehouseorderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
            this.warehousequery()
        },
        // 分页, 每页条数
        warehousepageSizeChangeHandle(val) {
            this.warehousepage = 1
            this.warehouselimit = val
            this.warehousequery()
        },
        // 分页, 当前页
        warehousepageCurrentChangeHandle(val) {
            this.warehousepage = val
            this.warehousequery()
        },
        warehousegetDataList: function () {
            this.warehousepage = 1
            this.warehousequery()
        },
    },
    components: {
        // AddOrUpdate
    },
    created() {
        this.warehousequery()
        this.carquery()
    }
}
</script>

<style lang="css" scoped>
.box {
    display: flex;
}

.box>>>.algo-button {
    background-color: rgb(64,
            158,
            255);
    margin: 20px auto;
    font-style: initial;
    color: antiquewhite;
    width: 100px;
    /* align-items: center;
    justify-content: center */
}

.box>>>.clear-button {
    background-color: rgb(64,
            158,
            255);
    margin: 20px auto;
    font-style: initial;
    color: antiquewhite;
    width: 100px;
    /* align-items: center;
    justify-content: center */
}

/* .box .button {
    margin: 0 auto;
} */
</style>
